<template>
	<view class="note">
		<view  v-for="(message2,index2) in msgarr3" :key="message2.message_id">	
			<view class="time-lag">
				{{renderMessageDate3(message2, index2)}}
			</view>	
				<!-- {{getInfo(message1.senderId)}} -->
				<view class="message-box-item">
					<image class="avatar" :src="groupMemberAvatar(userArr[index2].AvatarImg)"></image>
					<view>
						<view style="text-align:left;font-size:28rpx">
							{{userArr[index2].Nickname}}
						</view>
						<view >
							<view class="message-content" v-if="message2.message_type === 'text'" v-html="renderTextMessage(message2)" >
								</view>
								<image v-else-if="message2.message_type === 'image'" style="width:300rpx"
									:src="message2.payload_url" :data-url="message2.payload_url"
									@click.stop="showImageFullScreen" mode="widthFix"></image>
								<image v-else-if="message2.message_type === 'transmitImage'" style="width:300rpx"
								:src="message2.payload_path" :data-url="message2.payload_path"
								@click.stop="showImageFullScreen" mode="widthFix"></image>
								<view class="video-snapshot" v-if="message2.message_type === 'video'"
									:data-url="message2.payload_video_url" @click.stop="playVideo">
									<image :src="message2.payload_thumbnai_url" mode="aspectFit"></image>
									<view class="video-play-icon"></view>
								</view>
								<view class="video-snapshot" v-else-if="message2.message_type === 'transmitvideo'"
									:data-url="message2.payload_video_url" @click.stop="playVideo">
									<image :src="message2.payload_thumbnai_url" mode="aspectFit"></image>
									<view class="video-play-icon"></view>
								</view>
							</view>
						</view>		
				</view>
		</view>
		<video v-if="videoPlayer.visible" :src="videoPlayer.url" id="videoPlayer"
			@fullscreenchange="onVideoFullScreenChange"></video>
	</view>
</template>

<script>
	import EmojiDecoder from '../../../commen/base/EmojiDecoder';
	// import TUIEmoji from '../../../commen/tui-chat/message-elements/emoji/index';
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				lists: [],
				groupList: [],
				chooseIds: [],
				chooseIds2: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('chat').pull_up,
					loading: this.$t('chat').loading,
					nomore: this.$t('chat').note_no_more,
				},
				friend: null,
				currentUser: null,
				content: '',
				messages: [],
				message: null,
				sendnum: 0,
				filenew: {
					path:"",
					size:0,
				},
				videoObj:{
					videoUrl:"",
					thumbnailUrl:""
				},
				optinons:null,
				msgarr3:[],
				//定义表情列表
				emoji: {
					visible: false,
					decoder: new EmojiDecoder(),
				},
				userinfo:null,
				dicsUser:{},
				userArr:[],
				videoPlayer: {
					visible: false,
					url: '',
					context: null
				},
				// this.dicslevel[nowLevelf] = itemnow

			}
		},
		onReady() {
			this.videoPlayer.context = uni.createVideoContext('videoPlayer', this);
		},
		onLoad(option) {
			var arrnow = JSON.parse(option.messages);
			console.log("option.messages", arrnow)
			this.msgarr3 = arrnow
			this.userArr = [];
			for(var i = 0;i<arrnow.length;i++){
				this.getInfo(arrnow[i].sender_id);
				//this.userArr.push(this.getInfo(arrnow[i].senderId));	
			}
			
			// console.log("====merge=this.optinons==s======"+this.msgarr3.length);
			// console.log("====this.msgarrs==s======"+this.msgarr3[0].payload.text);
			//console.log("====merge=this.optinons==p======"+JSON.stringify(this.optinons.messages));
			// if(this.optinons.type==0){
			// 	this.message =JSON.stringify(this.optinons.messages);
			// 	console.log("=====this.message========"+JSON.stringify(this.message));
			// }
		    // this.currentUser = this.vuex_user;
			// this.getUserFriendList();
		},
		// onShow() {
		// 	uni.setNavigationBarTitle({
		// 		title: this.$t('chat').select_friend
		// 	});
		// },
		components: {
			// TUIEmoji,
		},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			onVideoFullScreenChange(e) {
				//当退出全屏播放时，隐藏播放器
				if (this.videoPlayer.visible && !e.detail.fullScreen) {
					this.videoPlayer.visible = false;
					this.videoPlayer.context.stop();
				}
			},
			playVideo(e) {
				this.videoPlayer.visible = true;
				this.videoPlayer.url = e.currentTarget.dataset.url;
				this.$nextTick(() => {
					this.videoPlayer.context.requestFullScreen({
						direction: 0
					});
					this.videoPlayer.context.play();
				});
			},
			groupMemberAvatar(avatar) {
				// console.log("+++++avatar++++++"+avatar);
				if (avatar == '') {
					return '../../../static/images/avatar.jpg'
				}
				if (avatar.indexOf("http") === 0) {
					return avatar
				} else {
					return 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/' + avatar
				}
			},
			getInfo(uid){
				// console.log("+++++"+uid);
				var that = this;
				var users={};
				that.$http.get('/mgr/user/account/info', { uid: uid }).then(res => {
					//users = res;
					
					that.userArr.push(res);
					//console.log("——————————users————————————"+JSON.stringify(that.userArr));
					//return users
					// that.userinfo.username = res.Nickname;
					// that.userinfo.Avatar=res.AvatarImg;	
				});

			},
			showImageFullScreen(e) {
				//console.log("----点击图片触发---"+JSON.stringify(e));
				let imagesUrl = [e.currentTarget.dataset.url];
				uni.previewImage({
					urls: imagesUrl
				});
			},
			renderMessageDate3(message, index) {
				//console.log("——————————index————————————"+index);
				var that = this;
				//that.getInfo(message.senderId)
				// that.$http.get('/mgr/user/account/info', { uid: message.senderId }).then(res => {
				// 	that.userinfo = res;
				// 	// that.userinfo.username = res.Nickname;
				// 	// that.userinfo.Avatar=res.AvatarImg;	
				// });
				// console.log("------message--------"+message.stamp);
				// console.log("------renderMessageDate--------"+JSON.stringify(message))
				return that.formatDate(message.timestamp)
			
			},
			renderTextMessage(message) {
				// console.log("---合并转发消息----"+JSON.stringify(message));
				return '<span class="text-content">' + this.emoji.decoder.decode(message.payload_text) + '</span>'
			},
			ToChangeMessages(messages){
				messages.forEach(message=>{
					console.log("接受批量转发信息"+JSON.stringify(message));
				})
			},
			getUserFriendList() {
				this.$http.get('/mgr/user/friend/data', {}).then(res => {
					this.lists = res;
				});
				this.$http.get('/mgr/user/group/list/data', {}).then(res => {
					this.groupList = res;
				});
			},
			checkboxGroupChange(e) {
				this.chooseIds = e;
			    console.log(this.chooseIds);
			},
			checkboxGroupChange2(e) {
				this.chooseIds2 = e;
			    console.log(this.chooseIds2);
			},
			tabChange(index) {
				this.current = index;
			},
			onNavigationBarButtonTap(e) {
				this.sendnum = this.chooseIds.length+this.chooseIds2.length
				//var arr = [];
				var that = this;

				if (e.type == 'close') {
					that.$u.route({
						type: 'back',
						delta: 1
					});
					return;
				}

				that.chooseIds.forEach(function(index) {
					that.sendnum--
					//arr.push(that.lists[index])
					console.log(that.lists[index]);
					//that.friend = that.lists[index]
					//发送下信息
					if(that.optinons.type==0){
						that.message = JSON.parse(that.optinons.messages);
						that.createTextMessage(that.lists[index])
					}else if(that.optinons.type==1){//逐条转发
						// console.log("=====that.optinons.messages.length========"+that.optinons.messages.length)
					    var arr = JSON.parse(that.optinons.messages)
						arr.forEach(function(message,indexs){
							//that.message =that.optinons.messages[indexs];
							that.message = message;
							// console.log("=====message========"+message)
							that.createTextMessage(that.lists[index])
						})
					}else if(that.optinons.type==2){//合并转发(待处理)
						//var messages={};
						//messages.name = 
						var friend = that.lists[index]
						var arr = JSON.parse(that.optinons.messages)
						//arr.forEach(function(message,indexs){
							//that.message =that.optinons.messages[indexs];
							that.message = JSON.stringify(arr);
							let imageMessage = that.goEasy.im.createCustomMessage({
								type:'mergeTransmit',
								payload: that.message,
								to: {
									id: friend.Friend,
									type: that.GoEasy.IM_SCENE.PRIVATE,
									data: {
										name: friend.FriendName,
										avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
											'../../../static/images/avatar.jpg'
									}
								},
								onProgress: function(progress) {
									console.log(progress)
								},
								notification: {
									title: that.currentUser.uname + that.$t('chat.chat_send_text'),
									body: '[' + that.$t('chat.chat_image_message') +
												']' // 字段最长 50 字符
								}
							});
							that.sendMessage(imageMessage);
	
					}
				});
				that.chooseIds2.forEach(function(index) {
					that.sendnum--
					//arr.push(that.groupList[index])
					console.log(that.groupList[index]);
					//that.friend = that.lists[index]
					//发送下信息
					if(that.optinons.type==0){
						that.message = JSON.parse(that.optinons.messages);
						that.createTextMessage(that.lists[index])
					}else if(that.optinons.type==1){//逐条转发
						// console.log("=====that.optinons.messages.length========"+that.optinons.messages.length)
					    var arr = JSON.parse(that.optinons.messages)

						arr.forEach(function(message,indexs){
							//that.message =that.optinons.messages[indexs];
							that.message = message;
							// console.log("=====message========"+message)
							that.createTextMessage2(that.groupList[index])
						})
					}


				});

				if(that.sendnum==0){
					that.$u.route({
						type: 'back',
						delta: 1
					});
					return;
				}
				// if (arr.length > 0) {
				// 	获取当前页面栈
				// 	let pages = getCurrentPages()
				// 	// pages数组中的最后一个为当前页面，倒数第二个为上一个页面
				// 	let prevPage = pages[pages.length - 2]
				// 	// 传参
				// 	//prevPage.$vm.friends = arr;
				// 	//uni.$emit('checkItem', arr)
				// 	返回上一页
				// 	that.$u.route({
				// 		type: 'back',
				// 		delta: 1
				// 	})
				// }
			},
			sendMessage(message) {
				// console.log("======sendMessage========");
				this.messages.push(message);
				//this.scrollToBottom();
				this.goEasy.im.sendMessage({
					message: message,
					onSuccess: function(message) {
						console.log('发送成功.', message);
						if(this.sendnum==0){
							this.$u.route({
								type: 'back',
								delta: 1
							})
						}

						//返回处理
					},
					onFailed: function(error) {
						if (error.code === 507) {
							console.log(
								'发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://www.goeasy.io/cn/docs/goeasy-2.x/im/message/media/send-media-message.html'
							);
						} else {
							console.log('发送失败:', error);
						}
					}
				});
			},
			createTextMessage(friend) {
				// console.log("-------createTextMessage-----"+this.content.trim());
				if(this.message.type == "text"){
					this.content = this.message.payload.text
					if (this.content.trim() !== '') {
						let body = this.content;
						if (this.content.length >= 50) {
							body = this.content.substring(0, 30) + '...';
						}
						let textMessage = this.goEasy.im.createTextMessage({
							text: this.content,
							to: {
								id: friend.Friend,
								type: this.GoEasy.IM_SCENE.PRIVATE,
								data: {
									name: friend.FriendName,
									avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
										'../../../static/images/avatar.jpg'
								}
							},
							notification: {
								title: this.currentUser.uname + this.$t('chat.chat_send_text'),
								body: body
							}
						});
						this.sendMessage(textMessage);
					}

				}else if(this.message.type == "image"){

					// console.log(this.message.payload.url+"++++++++filenew+++++++++"+this.message.payload.size)
					this.filenew.path = this.message.payload.url;
					this.filenew.size = this.message.payload.size;
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitImage',
						payload: this.filenew,
						to: {
							id: friend.Friend,
							type: this.GoEasy.IM_SCENE.PRIVATE,
							data: {
								name: friend.FriendName,
								avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
									'../../../static/images/avatar.jpg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat.chat_send_text'),
							body: '[' + this.$t('chat.chat_image_message') +
										']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "transmitvideo"){
					this.videoObj.videoUrl = this.message.payload.videoUrl;
					this.videoObj.thumbnailUrl = this.message.payload.thumbnailUrl
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitvideo',
						payload: this.videoObj,
						to: {
							id: friend.Friend,
							type: this.GoEasy.IM_SCENE.PRIVATE,
							data: {
								name: friend.FriendName,
								avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
									'../../../static/images/avatar.jpg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat.chat_send_text'),
							body: '[' + this.$t('chat.chat_image_message') +
										']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "video"){
					this.videoObj.videoUrl = this.message.payload.video.url;
					this.videoObj.thumbnailUrl = this.message.payload.thumbnail.url
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitvideo',
						payload: this.videoObj,
						to: {
							id: friend.Friend,
							type: this.GoEasy.IM_SCENE.PRIVATE,
							data: {
								name: friend.FriendName,
								avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
									'../../../static/images/avatar.jpg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat.chat_send_text'),
							body: '[' + this.$t('chat.chat_image_message') +
										']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "transmitImage"){

				    // console.log(this.message.payload.path+"++++++++filenew+++++++++"+this.message.payload.size)
					this.filenew.path = this.message.payload.path;
					this.filenew.size = this.message.payload.size;
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitImage',
						payload: this.filenew,
						to: {
							id: friend.Friend,
							type: this.GoEasy.IM_SCENE.PRIVATE,
							data: {
								name: friend.FriendName,
								avatar: friend.FriendAvatar != '' ? friend.FriendAvatar :
									'../../../static/images/avatar.jpg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat.chat_send_text'),
							body: '[' + this.$t('chat.chat_image_message') +
										']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}
			},
			createTextMessage2(group) {
				if(this.message.type == "text"){
					this.content = this.message.payload.text
					if (this.content.trim() !== '') {
						let body = this.content;
						if (this.content.length >= 50) {
							body = this.content.substring(0, 30) + '...';
						}
						let textMessage = this.goEasy.im.createTextMessage({
							text: this.content,
							to: {
								id: group.Gid,
								type: this.GoEasy.IM_SCENE.GROUP,
								data: {
									name: group.GroupName,
									avatar: group.GroupAvatarImg != '' ? group.GroupAvatarImg :
										'/static/static/assets/gruopavatar.svg'
								}
							},
							notification: {
								title: this.currentUser.uname + this.$t('chat.chat_send_text'),
								body: body // 字段最长 50 字符
							}
						});
						this.sendMessage(textMessage);
					}
				//this.content = '';
				}else if(this.message.type == "image"){
					// console.log(this.message.payload.url+"++++++++filenew+++++++++"+this.message.payload.size)
					this.filenew.path = this.message.payload.url;
					this.filenew.size = this.message.payload.size;
					// console.log("++++++++filenew+++++++++"+this.filenew)
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitImage',
						payload: this.filenew,
						to: {
							id: group.Gid,
							type: this.GoEasy.IM_SCENE.GROUP,
							data: {
								name: group.GroupName,
								avatar: group.GroupAvatarImg != '' ? group.GroupAvatarImg :'/static/static/assets/gruopavatar.svg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat')
								.chat_send_message,
							body: '[' + this.$t('chat.chat_image_message') +
								']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "transmitImage"){
					// console.log(this.message.payload.path+"++++++++filenew+++++++++"+this.message.payload.size)
					this.filenew.path = this.message.payload.path;
					this.filenew.size = this.message.payload.size;
					// console.log("++++++++filenew+++++++++"+this.filenew)
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitImage',
						payload: this.filenew,
						to: {
							id: group.Gid,
							type: this.GoEasy.IM_SCENE.GROUP,
							data: {
								name: group.GroupName,
								avatar: group.GroupAvatarImg != '' ? group.GroupAvatarImg :'/static/static/assets/gruopavatar.svg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat')
								.chat_send_message,
							body: '[' + this.$t('chat.chat_image_message') +
								']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "video"){
					this.videoObj.videoUrl = this.message.payload.video.url;
					this.videoObj.thumbnailUrl = this.message.payload.thumbnail.url
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitvideo',
						payload: this.videoObj,
						to: {
							id: group.Gid,
							type: this.GoEasy.IM_SCENE.GROUP,
							data: {
								name: group.GroupName,
								avatar: group.GroupAvatarImg != '' ? group.GroupAvatarImg :'/static/static/assets/gruopavatar.svg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat')
								.chat_send_message,
							body: '[' + this.$t('chat.chat_image_message') +
								']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}else if(this.message.type == "transmitvideo"){
					this.videoObj.videoUrl = this.message.payload.videoUrl;
					this.videoObj.thumbnailUrl = this.message.payload.thumbnailUrl
					let imageMessage = this.goEasy.im.createCustomMessage({
						type:'transmitvideo',
						payload: this.videoObj,
						to: {
							id: group.Gid,
							type: this.GoEasy.IM_SCENE.GROUP,
							data: {
								name: group.GroupName,
								avatar: group.GroupAvatarImg != '' ? group.GroupAvatarImg :'/static/static/assets/gruopavatar.svg'
							}
						},
						onProgress: function(progress) {
							console.log(progress)
						},
						notification: {
							title: this.currentUser.uname + this.$t('chat')
								.chat_send_message,
							body: '[' + this.$t('chat.chat_image_message') +
								']' // 字段最长 50 字符
						}
					});
					this.sendMessage(imageMessage);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.time-lag {
		margin: 20rpx 0;
	}
	.message-box-item {
		display: flex;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
			border-radius: 14rpx ;
		}
		.message-content {
			background-color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			max-width:400rpx;
		}
	}
</style>
